<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <!-- 添加视口 -->
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>原生 js 实现 Touch 轮播图</title>
  <style>
      /* 清除标签默认边距 */
      body, ul,
      li, ol, img {
          margin: 0;
          padding: 0;
      }

      /* 清除 ul 等标签前面的“小圆点” */
      ul, li, ol {
          list-style-type: none;
      }

      /* 图片自适应 */
      img {
          width: 100%;
          height: auto;
          border: none;
          /* ie8 */
          display: block;
          -ms-interpolation-mode: bicubic;
          /*为了照顾ie图片缩放失真*/
      }

      /* 轮播图最外层盒子 */
      .carousel {
          position: relative;
          overflow: hidden;
      }

      .carousel ul {
          /* 这个高度需要在JS里面动态添加 */
      }

      .carousel ul li {
          position: absolute;
          width: 100%;
          left: 0;
          top: 0;
          /* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/
          -webkit-transform: translateX(300%);
          transform: translateX(300%);
      }

      .attention_us {
          display: flex;
          justify-content: space-between;
          margin-top: 0.5rem;
          width: 100%;
      }

      .region {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 8rem;
          padding: 0 0.5rem;
      }

      .region img {
          width: 7.5rem;
          height: auto;
          margin-top: 0.5rem;
      }

      .us_center {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 8rem;
      }

      /* 小圆点盒子 */
      .carousel .points {
          /* 未知宽度的盒子，使用 absolute 定位，结合 transform 的方式进行居中 */
          position: absolute;
          left: 50%;
          bottom: 10px;
          transform: translateX(-50%);
      }

      /* 小圆点 */
      .carousel .points li {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          border: 1px solid #fff;
          float: left;
          margin: 0 2px;
      }

      /* 选中小圆点的样式类 */
      .carousel .points li.active {
          background-color: #fff;
      }
  </style>
</head>

<body>
<section class="carousel">
  <ul>
    <li>
      <div class="attention_us">
        <div class="region">
          <p class="us_title">微信公众号</p>
          <img src="/images/scale_weixin.png" alt="">
          <p style="margin-top:0.7rem;"><i class="xilin"></i> 锡林郭勒羊</p>
          <p style="margin-top:0.3rem;">扫码关注我们</p>
        </div>
        <div class="us_center">
          <div>
            <p>扫码关注我们</p>
            <p>打开京东app</p>
          </div>
        </div>
        <div class="region">
          <p class="us_title">京东旗舰店</p>
          <img src="/images/scale_jingdong.png" alt="">
          <p style="margin-top:0.7rem;"><i></i> 锡林郭勒羊区域</p>
          <p style="margin-top:0.3rem;">公用品牌旗舰店</p>
        </div>
      </div>
    </li>
    <li>
      <div class="attention_us">
        <div class="region">
          <p class="us_title">淘宝</p>
          <img src="/images/scale_taobao.png" alt="">
          <p style="margin-top:0.7rem;"><i class="xilin"></i> 锡林郭勒羊</p>
          <p style="margin-top:0.3rem;">扫码关注我们</p>
        </div>
        <div class="us_center">
          <div>
            <p>打开淘宝app</p>
            <p>打开抖音app</p>
          </div>
        </div>
        <div class="region">
          <p class="us_title">抖音</p>
          <img src="/images/scale_douyi.png" alt="">
          <p style="margin-top:0.7rem;"><i></i> 锡林郭勒羊区域</p>
          <p style="margin-top:0.3rem;">公用品牌旗舰店</p>
        </div>
      </div>
    </li>
  </ul>
  <ol class="points"></ol>
</section>
</body>


<script>
  window.onload = function () {
    var carousel = document.querySelector('.carousel');
    var carouselUl = carousel.querySelector('ul');
    var carouselLis = carouselUl.querySelectorAll('li');
    var points = carousel.querySelector('ol');
    // 屏幕的宽度
    var screenWidth = document.documentElement.offsetWidth;
    var timer = null;

    // 设置 ul 的高度
    carouselUl.style.height = carouselLis[0].offsetHeight + 'px';

    // 动态生成小圆点
    for (var i = 0; i < carouselLis.length; i++) {
      var li = document.createElement('li');
      if (i == 0) {
        li.classList.add('active');
      }
      points.appendChild(li);
    }

    // 初始三个固定的位置
    var left = carouselLis.length - 1;
    var center = 0;
    var right = 1;

    // 归位（多次使用，封装成函数）
    setTransform();

    // 调用定时器
    timer = setInterval(showNext, 2000);

    // 分别绑定touch事件
    var startX = 0; // 手指落点
    var startTime = null; // 开始触摸时间
    carouselUl.addEventListener('touchstart', touchstartHandler); // 滑动开始绑定的函数 touchstartHandler
    carouselUl.addEventListener('touchmove', touchmoveHandler); // 持续滑动绑定的函数 touchmoveHandler
    carouselUl.addEventListener('touchend', touchendHandeler); // 滑动结束绑定的函数 touchendHandeler

    // 轮播图片切换下一张
    function showNext() {
      // 轮转下标
      left = center;
      center = right;
      right++;
      //　极值判断
      if (right > carouselLis.length - 1) {
        right = 0;
      }
      //添加过渡（多次使用，封装成函数）
      setTransition(1, 1, 0);
      // 归位
      setTransform();
      // 自动设置小圆点
      setPoint();
    }

    // 轮播图片切换上一张
    function showPrev() {
      // 轮转下标
      right = center;
      center = left;
      left--;
      //　极值判断
      if (left < 0) {
        left = carouselLis.length - 1;
      }
      //添加过渡
      setTransition(0, 1, 1);
      // 归位
      setTransform();
      // 自动设置小圆点
      setPoint();
    }

    // 滑动开始
    function touchstartHandler(e) {
      // 清除定时器
      clearInterval(timer);
      // 记录滑动开始的时间
      startTime = Date.now();
      // 记录手指最开始的落点
      startX = e.changedTouches[0].clientX;
    }

    // 滑动持续中
    function touchmoveHandler(e) {
      // 获取差值 自带正负
      var dx = e.changedTouches[0].clientX - startX;
      // 干掉过渡
      setTransition(0, 0, 0);
      // 归位
      setTransform(dx);
    }

    //　滑动结束
    function touchendHandeler(e) {
      // 在手指松开的时候，要判断当前是否滑动成功
      var dx = e.changedTouches[0].clientX - startX;
      // 获取时间差
      var dTime = Date.now() - startTime;
      // 滑动成功的依据是滑动的距离（绝对值）超过屏幕的三分之一 或者滑动的时间小于300毫秒同时滑动的距离大于30
      if (Math.abs(dx) > screenWidth / 3 || (dTime < 300 && Math.abs(dx) > 30)) {
        // 滑动成功了
        // 判断用户是往哪个方向滑
        if (dx > 0) {
          // 往右滑 看到上一张
          showPrev();
        } else {
          // 往左滑 看到下一张
          showNext();
        }
      } else {
        // 添加上过渡
        setTransition(1, 1, 1);
        // 滑动失败了
        setTransform();
      }

      // 重新启动定时器
      clearInterval(timer);
      // 调用定时器
      timer = setInterval(showNext, 2000);
    }

    // 设置过渡
    function setTransition(a, b, c) {
      if (a) {
        carouselLis[left].style.transition = 'transform 1s';
      } else {
        carouselLis[left].style.transition = 'none';
      }
      if (b) {
        carouselLis[center].style.transition = 'transform 1s';
      } else {
        carouselLis[center].style.transition = 'none';
      }
      if (c) {
        carouselLis[right].style.transition = 'transform 1s';
      } else {
        carouselLis[right].style.transition = 'none';
      }
    }

//touch暂停轮播
    function touchstartHandler(e) {
      console.log('暂停')
      // 清除定时器
      clearInterval(timer);
      // 记录滑动开始的时间
      startTime = Date.now();
      // 记录手指最开始的落点
      startX = e.changedTouches[0].clientX;
    }

    //　封装归位
    function setTransform(dx) {
      dx = dx || 0;
      carouselLis[left].style.transform = 'translateX(' + (-screenWidth + dx) + 'px)';
      carouselLis[center].style.transform = 'translateX(' + dx + 'px)';
      carouselLis[right].style.transform = 'translateX(' + (screenWidth + dx) + 'px)';
    }

    // 动态设置小圆点的active类
    var pointsLis = points.querySelectorAll('li');

    function setPoint() {
      for (var i = 0; i < pointsLis.length; i++) {
        pointsLis[i].classList.remove('active');
      }
      pointsLis[center].classList.add('active');
    }
  }
</script>

</html>
